<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模版管理</title>
    <link rel="icon" href="/logo.png" type="image/x-icon" />
    <script type="text/javascript" src="vue2.7.js"></script>
    <style>
        .button {
            position: relative;
            overflow: hidden;
            height: 3rem;
            padding: 0 2rem;
            border-radius: 1.5rem;
            background: #3d3a4e;
            background-size: 400%;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .button:hover::before {
            transform: scaleX(1);
        }

        .button-content {
            position: relative;
            z-index: 1;
            font-size: 16px;
        }

        .button::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            transform: scaleX(0);
            transform-origin: 0 50%;
            width: 100%;
            height: inherit;
            border-radius: inherit;
            background: linear-gradient(82.3deg,
                    rgba(150, 93, 233, 1) 10.8%,
                    rgba(99, 88, 238, 1) 94.3%);
            transition: all 0.475s;
        }
    </style>
</head>

<body>
    <div id="app">
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <h2>模版管理</h3>
                <p></p>
                <a href="config.html" target="_blank">
                    <button class="button">
                        <span class="button-content">章模版管理 </span>
                    </button>
                </a>
                <p></p>
                <a href="config2.html" target="_blank">
                    <button class="button">
                        <span class="button-content">节模版管理 </span>
                    </button>
                </a>
                <p></p>
                <a href="config3.html" target="_blank">
                    <button class="button">
                        <span class="button-content">小节模版管理 </span>
                    </button>
                </a>
                <p></p>
                <a v-if="isAdmin" href="verify.html" target="_blank">
                    <button class="button">
                        <span class="button-content">模版审核 </span>
                    </button>
                </a>
        </div>
    </div>

    <script>
        var tokenObj = {}
        var tokenInfo = localStorage.getItem('tokenInfo')
        try {
            tokenObj = JSON.parse(tokenInfo)
        } catch (error) {
            console.error('JSON 转换 失败:', error.message);
        }
        var app = new Vue({
            el: "#app",
            data: {
                isAdmin: !!tokenObj.admin,
            },
            methods: {
                handleChange: function (event) {
                }
            },
        })
        console.log(' is admin', app.isAdmin)
    </script>
</body>

</html>